<template>
  <div class="fillcontain">
    <head-top></head-top>
    <div class="table_container">
      <el-table :data="bwlotteryData.prizeInfo" style="width: 100%;">
        <el-table-column label="序号" prop="languageCode" width="150" align="center">
          <template scope="scope">
            {{scope.$index + 1}}
          </template>
        </el-table-column>
        <el-table-column label="奖品名称" prop="commodityName" align="center">
          <template scope="scope">
            <el-input size="small" v-model="scope.row.commodityName" :value="scope.commodityName" placeholder="请输入奖品名称"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="奖品标识" prop="level" align="center">
          <template scope="scope">
            <el-input size="small" v-model="scope.row.level" placeholder="请输入奖品标识"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="奖品图片地址" prop="picUrlDesc" align="center">
          <template scope="scope">
            <el-input size="small" v-model="scope.row.picUrlDesc" placeholder="请输入奖品图片地址"></el-input>
          </template>
        </el-table-column>
      </el-table>
      <el-row :gutter="20" class="tableUpload">
        <el-col class="title">
          <div class="grid-content bg-purple">大转盘图片</div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple pad" :data="bwlotteryData">
            <el-input class="imgiput" v-model="bwlotteryData.imgSrc" placeholder="请输入内容"></el-input>
          </div>
        </el-col>
        <el-col class="uploadWrape">
          <div class="grid-content bg-purple">
            <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="3" :on-exceed="handleExceed" :file-list="fileList">
              <el-button class="upBut" size="small" type="primary">点击上传</el-button>
            </el-upload>
          </div>
        </el-col>
      </el-row>
      <el-table :data="lotteryTaskData" style="width: 100%; margin-top:10px;">
        <el-table-column label="序号" prop="languageCode" width="150" align="center">
          <template scope="scope">
            {{scope.$index + 1}}
          </template>
        </el-table-column>
        <el-table-column label="类型" prop="type" align="center">
          <template scope="scope">
            {{scope.row.type}}
          </template>
        </el-table-column>
        <el-table-column label="详细描述" prop="description" align="center">
          <template scope="scope">
            <el-input size="small" v-model="scope.row.description" placeholder="请输入详细描述"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="地址" prop="address" align="center">
          <template scope="scope">
            <el-input size="small" v-model="scope.row.address" placeholder="请输入跳转地址"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="按钮名称" prop="buttonName" align="center">
          <template scope="scope">
            <el-input size="small" v-model="scope.row.buttonName" placeholder="请输入按钮名称"></el-input>
          </template>
        </el-table-column>
      </el-table>
      <el-row class="P_button">
        <el-button type="primary" @click="onSubmit()">保存</el-button>
        <el-button @click="onDelete()">重置</el-button>
      </el-row>
    </div>
  </div>
</template>

<script>
import showBigImg from '../components/showBigImg.vue'
import headTop from '../components/headTop'
export default {
  name: 'everydayCoutesy',
  data () {
    return {
      fileList: [],
      bwlotteryData: {
        "title": "大轮盘抽奖", // 抽奖名称
        "imgSrc": "../../src/assets/images/lotteryComponents/lottery.png", // 大轮盘抽奖图片
        "prizeInfo": [  // 对应奖品列表
          {
            "level": 1, // 奖品排列序号
            "type": "missed", // 奖品类型 [missed未中奖 , virtual话费或者流量,  physical实物]
            "picUrlDesc": "../../src/assets/images/lotteryComponents/2m.png", // 奖品小图
            "prizeId": "55213123123", // 奖品ID 可以不给
            "commodityName": "3元话费" // 奖品名称
          }, {
            "level": 2,
            "type": "virtual",
            "picUrlDesc": "../../src/assets/images/lotteryComponents/iphone.png",
            "prizeId": "55213123123",
            "commodityName": "2元话费"
          }, {
            "level": 3,
            "type": "virtual",
            "picUrlDesc": "../../src/assets/images/lotteryComponents/2m.png",
            "prizeId": "55213123123",
            "commodityName": "50元话费"
          }, {
            "level": 4,
            "type": "virtual",
            "picUrlDesc": "../../src/assets/images/lotteryComponents/mini.png",
            "prizeId": "55213123123",
            "commodityName": "100M流量"
          }, {
            "level": 5,
            "type": "virtual",
            "picUrlDesc": "../../src/assets/images/lotteryComponents/5m.png",
            "prizeId": "55213123123",
            "commodityName": "爱奇艺会员"
          }, {
            "level": 6,
            "type": "physical",
            "picUrlDesc": "../../src/assets/images/lotteryComponents/3m.png",
            "prizeId": "55213123123",
            "commodityName": "100元加油卡"
          }, {
            "level": 7,
            "type": "virtual",
            "picUrlDesc": "../../src/assets/images/lotteryComponents/hw.png",
            "prizeId": "55213123123",
            "commodityName": "20M流量"
          }, {
            "level": 8,
            "type": "physical",
            "picUrlDesc": "../../src/assets/images/lotteryComponents/10m.png",
            "prizeId": "55213123123",
            "commodityName": "ipad 32G"
          }
        ]
      }, // 接口数据
      lotteryTaskData: [
        { 'id': 1, 'type': '分享', 'address': 'http://www.baidu.com', 'description': 'ss', 'buttonName': '去分享' },
        { 'id': 2, 'type': '阅读', 'address': 'http://www.baidu.com', 'description': '111', 'buttonName': '阅读' },
        { 'id': 3, 'type': '问卷', 'address': 'http://www.baidu.com', 'description': '222', 'buttonName': '问卷' }
      ]
    }
  },
  components: {
    showBigImg,
    headTop
  },
  methods: {
    handleRemove (file, fileList) {
      console.log(file, fileList);
    },
    handlePreview (file) {
      console.log(file);
    },
    handleExceed (files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove (file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    }
  },
  mounted () {

  }
}
</script>

<style lang="less" scoped>
.table_container {
  padding: 20px;
  .P_button {
    width: 100%;
    text-align: center;
    margin-top: 30px;
  }
  .tableUpload {
    margin: 0 auto !important;
    margin-top: 10px !important;
    border: 1px solid #ddd;
    padding: 10px 10px;
    .title {
      width: 11%;
      line-height: 40px;
      text-align: right;
    }
    .pad {
      padding-top: 2px;
    }
    .imgiput {
      width: 100%;
    }
    .uploadWrape {
      width: 10%;
      padding: 5px 0 0 5px;
    }
    .el-row {
      margin-bottom: 20px;
      &:last-child {
        margin-bottom: 0;
      }
    }
    .el-col {
      border-radius: 4px;
    }
    .grid-content {
      border-radius: 4px;
      min-height: 36px;
    }
    .row-bg {
      padding: 10px 0;
    }
  }
}
</style>